<template>
    <div id="main">
        <!-- 头部 -->
        <div class="record">
            <div class="header">
                <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" safe-area-inset-top >
                     <template #right>
                         <slot name="right"></slot>
                     </template>
                </van-nav-bar>
            </div>
        </div>
        <main>
            <slot />
        </main>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '乐呗采购管理系统'
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
    },
};
</script>

<style lang="less" scoped>
@import "@/style/index.less";

.van-hairline--bottom {
    background-color: #6199ff;
}

.header/deep/ .van-nav-bar__arrow,
.header/deep/ .van-nav-bar__text,
.header/deep/ .van-nav-bar__title {
    color: #F2F2F2 !important;
    font-size: 20px;
}


/deep/ .header {
    .van-nav-bar__arrow,.van-nav-bar__text {
    font-size: @14;
    color: #000;
  }
  .van-nav-bar__title {
    font-size: @20;

  }
}
</style>